<template>
  <view class="nursing-daily-container">
    <view class="profile-card">
      <view class="avatar-area">
        <image
          class="avatar"
          :src="userOfClient.avatarUrl || defaultAvatar"
          mode="aspectFill"
          @click="chooseAvatar"
        />
        <view class="username-edit-row">
          <template v-if="editingUsername">
            <input
              class="username-input"
              v-model="editUsername"
              placeholder="请输入昵称"
              maxlength="20"
              @blur="saveUsername"
              @confirm="saveUsername"
              focus
            />
            <view class="edit-btn" @click="saveUsername">保存</view>
            <view class="edit-btn cancel" @click="cancelEditUsername"
              >取消</view
            >
          </template>
          <template v-else>
            <view class="username">{{
              userOfClient.username || client.name
            }}</view>
            <view class="edit-btn" @click="editingUsername = true">编辑</view>
          </template>
        </view>
      </view>
      <view class="info-row"
        ><text class="info-label">姓名：</text>{{ client.name }}</view
      >
      <view class="info-row"
        ><text class="info-label">性别：</text>{{ client.gender }}</view
      >
      <view class="info-row"
        ><text class="info-label">年龄：</text>{{ client.age }}</view
      >
      <view class="info-row"
        ><text class="info-label">身份证号：</text>{{ client.idNumber }}</view
      >
      <view class="info-row"
        ><text class="info-label">血型：</text>{{ client.bloodType }}</view
      >
      <view class="info-row"
        ><text class="info-label">联系电话：</text>{{ client.phone }}</view
      >
      <view class="info-row"
        ><text class="info-label">家庭联系人：</text
        >{{ client.familyContact }}</view
      >
      <view class="info-row">
        <text class="info-label">入住床位：</text>{{ bedInfo }}
      </view>
      <view class="info-row"
        ><text class="info-label">入住日期：</text
        >{{ client.checkinDate }}</view
      >
      <view class="info-row"
        ><text class="info-label">合同到期：</text
        >{{ client.contractEndDate }}</view
      >
      <view class="info-row"
        ><text class="info-label">状态：</text>{{ client.status }}</view
      >
    </view>
    <CustomTabBar :currentTab="3" />
  </view>
</template>

<script>
import CustomTabBar from "../clientTab/customTabBar.vue";
export default {
  components: { CustomTabBar },
  data() {
    return {
      client: {},
      userOfClient: {},
      defaultAvatar: "/static/default-avatar.png",
      editingUsername: false,
      editUsername: "",
      bedInfo: "—",
    };
  },
  onLoad() {
    this.client = uni.getStorageSync("client") || {};
    this.userOfClient = uni.getStorageSync("uoc") || {};
    this.editUsername = this.userOfClient.username || "";
    if (this.client.bedId) {
      this.fetchBedInfo(this.client.bedId);
    }
  },
  methods: {
    chooseAvatar() {
      // 直接从 userOfClient 取 ucId
      const ucId = this.userOfClient.ucId;
      if (!ucId) {
        uni.showToast({ title: "网络异常，请退出重新登录", icon: "none" });
        return;
      }
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://localhost:9000/file/upload", // 改成你的后端接口
            filePath: tempFilePath,
            name: "file",
            formData: {
              ucId: ucId,
            },
            success: (uploadRes) => {
              let result = uploadRes.data;
              if (typeof result === "string") {
                try {
                  result = JSON.parse(result);
                } catch (e) {
                  result = {};
                }
              }
              // 兼容你的返回结构
              if (
                result.status === 200 &&
                result.data &&
                result.data.isOK &&
                result.data.url
              ) {
                this.userOfClient.avatarUrl = result.data.url;
                uni.setStorageSync("uoc", this.userOfClient);
                uni.showToast({ title: "头像已更换", icon: "success" });
              } else {
                uni.showToast({ title: "上传失败", icon: "none" });
              }
            },
            fail: () => {
              uni.showToast({ title: "上传失败", icon: "none" });
            },
          });
        },
      });
    },

    saveUsername() {
      if (this.editUsername.trim() === "") {
        uni.showToast({ title: "昵称不能为空", icon: "none" });
        return;
      }
      this.userOfClient.username = this.editUsername.trim();
      uni.setStorageSync("uoc", this.userOfClient);
      this.editingUsername = false;
      uni.showToast({ title: "昵称已更新", icon: "success" });
    },
    cancelEditUsername() {
      this.editingUsername = false;
      this.editUsername = this.userOfClient.username || "";
    },
    fetchBedInfo(bedId) {
      uni.request({
        url: "http://localhost:9000/bed/getBedById",
        method: "GET",
        data: { bedId: bedId },
        success: (res) => {
          if (res.data && res.data.status === 200 && res.data.data) {
            const bed = res.data.data;
            this.bedInfo = `${bed.building || ""}号楼-${
              bed.floorNumber || ""
            }层-${bed.roomNumber || ""}房-${bed.bedNumber || ""}号床`;
          } else {
            this.bedInfo = "未知床位";
          }
        },
        fail: () => {
          this.bedInfo = "未知床位";
        },
      });
    },
  },
};
</script>


<style scoped>
.nursing-daily-container {
  background-color: #fffbe6;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.profile-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(160, 120, 20, 0.06);
  padding: 34rpx 28rpx 18rpx 28rpx;
  margin: 0 24rpx 32rpx 24rpx;
}
.avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26rpx;
  position: relative;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #f5f7fa;
  border: 2rpx solid #faad14;
  margin-bottom: 10rpx;
}
.username-edit-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 12rpx;
}
.username {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  background: #f9fafc;
  border-radius: 12rpx;
  padding: 4rpx 18rpx;
}
.username-input {
  border: 1rpx solid #faad14;
  font-size: 28rpx;
  color: #333;
  background: #f9fafc;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  width: 220rpx;
}
.edit-btn {
  font-size: 24rpx;
  color: #faad14;
  background: #f9fafc;
  border-radius: 8rpx;
  padding: 2rpx 14rpx;
  margin-left: 8rpx;
  cursor: pointer;
}
.edit-btn.cancel {
  color: #f56c6c;
  background: #fbeaea;
}
.info-row {
  display: flex;
  font-size: 26rpx;
  color: #555;
  border-bottom: 1rpx solid #f5f7fa;
  padding: 13rpx 0;
  align-items: center;
}
.info-label {
  width: 140rpx;
  color: #faad14;
  font-weight: 500;
  flex-shrink: 0;
}
</style>
